@extends('home.base')
@section('title')
    {{$data->title}}
@endsection
@section('content')
<link rel="stylesheet" type="text/css" href="{{asset('static/home/css/slider-pro.min.css')}}" media="screen"/>
@include('home.header')
<div id="app">
    <div class="handtitle">
        <div class="w1200 con">
            <h3>{{$data->title}}</h3>
            <i-button type="warning" @click="seeHouse = true">预约看房</i-button>
        </div>
    </div>
    <div class="position">
        <div class="w1200">
            <Breadcrumb>
                <breadcrumb-item to="/">首页</breadcrumb-item>
                <breadcrumb-item to="/hand/{{$data->region}}">二手房列表</breadcrumb-item>
                <breadcrumb-item>{{$data->title}}</breadcrumb-item>
            </Breadcrumb>
        </div>
    </div>
    <div class="property-detail handroom">
        <div class="w1200 top">
            <div class="left">
                <div id="sliderpro" class="slider-pro">
                    <div class="sp-slides">
                        @if(isset($data->images) && !$data->images == '')
                        @foreach($data->images as $b)
                        <div class="sp-slide">
                            <img class="sp-image" src="/static/home/images/blank.gif"
                                 data-src="{{$b['bigimg']}}"
                            />
                        </div>
                        @endforeach
                        @endif
                    </div>
                    <div class="sp-thumbnails">
                        @if(isset($data->images) && !$data->images == '')
                        @foreach($data->images as $s)
                        <div class="sp-thumbnail">
                            <div class="sp-thumbnail-image-container">
                                <img class="sp-thumbnail-image" src="{{$s['smallimg']}}"/>
                            </div>
                        </div>
                        @endforeach
                        @endif
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="price">
                    <div class="total">
                        <span>{{$data->price}}</span> 万
                    </div>
                    <div class="aver">{{$data->average}}元/平米</div>
                </div>
                <div class="main">
                    <p><span>小区名称</span> {{$data->communityname}}</p>
                    <p><span>所在区域</span> {{$data->areaname}} - {{$data->town}}</p>
                    <p>
                        <span>详细地址</span> {{$data->address}}&emsp;
                        <a href="/property/map?pos={{$data->map}}&n={{$data->title}}" target="_blank">查看地图</a>
                    </p>
                </div>
                <div class="desc">
                    <div class="tip">
                        <p class="tit">{{$data->room}}室{{$data->hall}}厅</p>
                        <p>{{$data->floor}}/{{$data->floor_num}}层</p>
                    </div>
                    <div class="tip">
                        <p class="tit">{{$data->acreage}}平米</p>
                        <p>{{$data->renovation_name}}</p>
                    </div>
                    <div class="tip">
                        <p class="tit">{{$data->direction}}</p>
                        <p>{{$data->year}}年建</p>
                    </div>
                </div>
                <div class="contact">
                    <i-button type="warning">在线咨询</i-button>
                </div>
            </div>
        </div>
        <div class="detail-con">
            <div class="w1200">
                <div class="pro-desc">
                    <div class="title">
                        <h3>房源<span>信息</span></h3>
                    </div>
                    <div class="list">
                        <div class="row">
                            <div class="left">
                                <i>房屋户型：</i>{{$data->room}}室{{$data->hall}}厅{{$data->kitchen}}厨{{$data->toilet}}卫
                            </div>
                            <div class="right">
                                <i>所在楼层：</i>{{$data->floor}}/{{$data->floor_num}}层
                            </div>
                        </div>
                        <div class="row">
                            <div class="left">
                                <i>建筑面积：</i>
                                {{$data->acreage}}平米
                            </div>
                            <div class="right">
                                <i>装修情况：</i>{{$data->renovation_name}}
                            </div>
                        </div>
                        <div class="row">
                            <div class="left">
                                <i>房屋朝向：</i>{{$data->direction}}
                            </div>
                            <div class="right">
                                <i>建筑年代：</i>{{$data->year}}年建
                            </div>
                        </div>
                        <div class="row">
                            <div class="left">
                                <i>房源标签：</i>
                                @foreach($data->attribute as $t)
                                    <span class="tag">{{$t->name}}</span>
                                @endforeach
                            </div>
                            <div class="right">
                                <i>所属小区：</i>{{$data->communityname}}
                            </div>
                        </div>

                    </div>
                </div>
                <div class="pro-desc">
                    <div class="title">
                        <h3>房源<span>图片</span></h3>
                    </div>
                    <div>
                        {!! $data->content !!}
                    </div>
                </div>
                <div class="pro-desc">
                    <div class="title">
                        <h3>小区<span>信息</span></h3>
                    </div>
                    <div class="community">
                        <div class="img">
                            <img src="{{$data->community->thumb}}" alt="{{$data->community->title}}">
                        </div>
                        <div class="con">
                            <h3>{{$data->community->title}}</h3>
                            <div class="list">
                                <span class="tit">建筑年代</span>
                                <span>{{$data->community->year}}年建</span>
                            </div>
                            <div class="list">
                                <span class="tit">总&ensp;户&ensp;数</span>
                                <span>{{$data->community->plan_num}}</span>
                            </div>
                            <div class="list">
                                <span class="tit">委托房源</span>
                                <span>{{$handroomNum}}套在售二手房，{{$rentalhouseNum}}套出租房源</span>
                            </div>
                            <div class="list">
                                <span class="tit">物业公司</span>
                                <span>{{$data->community->pmc}}</span>
                            </div>
                            <div class="list">
                                <span class="tit">物&ensp;业&ensp;费</span>
                                <span>{{$data->community->pm_fee}}</span>
                            </div>
                            <div class="list">
                                <span class="tit">小区地址</span>
                                <span>{{$data->community->address}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="pro-desc">
                    <div class="title">
                        <h3>周边<span>配套</span></h3>
                    </div>
                    <div class="zhoubian">
                        <div class="map-txt">
                            <ul class="map-txt-icon">
                                <li val_class="学校">
                                    <Icon type="ios-school"></Icon>
                                    <span>学校</span>
                                </li>
                                <li val_class="购物">
                                    <Icon type="md-cart"></Icon>
                                    <span>购物</span>
                                </li>
                                <li val_class="餐饮">
                                    <Icon type="ios-restaurant"></Icon>
                                    <span>餐饮</span>
                                </li>
                                <li val_class="银行">
                                    <Icon type="logo-bitcoin"></Icon>
                                    <span>银行</span>
                                </li>
                                <li val_class="公园">
                                    <Icon type="md-walk"></Icon>
                                    <span>公园</span>
                                </li>
                                <li val_class="交通">
                                    <Icon type="md-bus"></Icon>
                                    <span>交通</span>
                                </li>
                            </ul>
                        </div>
                        <div class="map" id="allmap"></div>
                        <input type="hidden" id="map" value="{{$data->map}}">
                    </div>
                </div>
                @include('home.housecal')
            </div>
        </div>
        <input type="hidden" id="d_type" value="hand">
        <input type="hidden" id="property" value="{{$data->id}},{{$data->title}}">
        @include('home.viewForm')
    </div>
    @include('home.footer')
</div>
@endsection

@section('script')
    <style>
        .qr .qr-menu .menu a.menu_3{color:#f90;border-bottom:2px solid #f90}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=2pOLT55iaTI8LVvPfirAgUDqaZa0sdnj"></script>
    <script src="{{asset('static/home/js/jquery.sliderPro.min.js')}}"></script>
    <script src="{{asset('static/home/js/detail.js')}}"></script>
    <script>
        var lngLat = document.getElementById("map").value.split(',')
        var map;
        var bounds;
        var circle;
        var local;
        var lng=lngLat[0];
        var lat=lngLat[1];//指定位置的经度纬度可以到百度定位拾取系统去拿 http://api.map.baidu.com/lbsapi/getpoint/index.html
        var search= '学校';
        var MyMarker;
        // 百度地图API功能
        $(function(){
            map = new BMap.Map("allmap");
            GetLocation();
            var mPoint = new BMap.Point(lng,lat);
            var MyIcon = new BMap.Icon("/images/tip.png", new BMap.Size(26,28));
            MyMarker = new BMap.Marker(mPoint,{icon:MyIcon});
            MyMarker.setAnimation(BMAP_ANIMATION_BOUNCE);
            map.enableScrollWheelZoom();
            map.centerAndZoom(mPoint,15);
            map.addOverlay(MyMarker);

            $('.map-txt-icon li').each(function(index) {
                $(this).click(function(){
                    $(this).parents('.map-txt-icon').find('.tuijian_in').removeClass('tuijian_in');
                    $(this).addClass("tuijian_in");
                    search = $(this).attr('val_class');
                    Search(search,mPoint);
                });
            });
            Search(search,mPoint);

        });

        /**
         * 得到圆的内接正方形bounds
         * @param {Point} centerPoi 圆形范围的圆心
         * @param {Number} r 圆形范围的半径
         * @return 无返回值
         */
        function getSquareBounds(centerPoi,r){
            var a = Math.sqrt(2) * r; //正方形边长
            var mPoi = getMecator(centerPoi);
            var x0 = mPoi.x, y0 = mPoi.y;
            var x1 = x0 + a / 2 , y1 = y0 + a / 2;//东北点
            var x2 = x0 - a / 2 , y2 = y0 - a / 2;//西南点
            var ne = getPoi(new BMap.Pixel(x1, y1)), sw = getPoi(new BMap.Pixel(x2, y2));
            return new BMap.Bounds(sw, ne);
        };
        //根据球面坐标获得平面坐标。
        function getMecator(poi){
            return map.getMapType().getProjection().lngLatToPoint(poi);
        };
        //根据平面坐标获得球面坐标。
        function getPoi(mecator){
            return map.getMapType().getProjection().pointToLngLat(mecator);
        };

        function Search(search,mPoint){
            map.clearOverlays();
            circle = new BMap.Circle(mPoint,1000,{stroke:"white",strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});
            map.addOverlay(circle);
            local =  new BMap.LocalSearch(map, {renderOptions: {map: map, autoViewport: false}});
            bounds = getSquareBounds(circle.getCenter(),circle.getRadius());
            local.searchInBounds(search,bounds);
            map.addOverlay(MyMarker);
        };

        function GetLocation(){
            var geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(function(r){
                    if(this.getStatus() == BMAP_STATUS_SUCCESS){
                        lng = r.point.lng;
                        lat = r.point.lat;
                    }else{
                        alert('failed'+this.getStatus());
                    }
                },{enableHighAccuracy: true}
            );
        };
    </script>
@endsection